/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 预约页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Checkbox,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'
import ModalTip from './modal/tips'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 显示提示弹框
      showTip: false,
      // 彩票站列表
      stationList: [
        {
          num: '12324234324',
          distance: 10.2,
          flag: {
            cpk: true,
            fwh: true,
            xyx: true,
            card: true,
            bao: true,
          },
        },
        {
          num: '42432',
          distance: 12.2,
          flag: {
            cpk: true,
            fwh: true,
            xyx: false,
            card: true,
            bao: true,
          },
        },
        {
          num: '42432',
          distance: 12.2,
          flag: {
            cpk: true,
            fwh: true,
            xyx: false,
            card: true,
            bao: true,
          },
        },
        {
          num: '42432',
          distance: 12.2,
          flag: {
            cpk: true,
            fwh: true,
            xyx: false,
            card: true,
            bao: true,
          },
        },
        {
          num: '42432',
          distance: 12.2,
          flag: {
            cpk: true,
            fwh: true,
            xyx: false,
            card: true,
            bao: true,
          },
        },
      ],
    }
  }


  /**
   * 生成标题
   */
  createTitle=() => '预约'

  /**
   * 提交预约
   */
  onNext=() => {
    console.log('提交预约')
    this.setState({
      showTip: true,
    })
  }

  /**
   * 选中一个投注站
   */
  onCheck=(e, item) => {
    console.log(e.target.checked, item)
  }

  /**
   * 提示弹框关闭
   */
  onTipOk=(noTip) => {
    console.log(noTip)
    this.setState({
      showTip: false,
    })
  }

  render() {
    const { stationList, showTip } = this.state
    const title = this.createTitle()
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={null}
        />
        <div className="page-content contain-footer appointment-container">
          <div className="title-bar"><p className="title">预约详情</p></div>
          <div className="detail-wrap">
            <div className="detail-box">
              <p className="detail-item"><span>手机号码：</span><span>12793292939</span></p>
              <p className="detail-item"><span>送票地址：</span><span>北京市昌平区太平现状北街天路铜元八号15号楼1单元1402</span></p>
              <p className="detail-item"><span>预约金额：</span><span><span className="font-red">10</span>元</span></p>
              <p className="detail-tip font-red">中奖奖金客直接返入账号（彩票由投注站保管并兑奖）也可送票或自取，自行兑奖。</p>
            </div>
          </div>
          <div className="station-wrap">
            <div className="title-bar"><p className="title">附近彩票投注站</p></div>
            <div className="station-list">
              {
                stationList.map((item, index) => {
                  const result = (
                    <div className="station-item">
                      <div className="item-left">
                        <Checkbox.AgreeItem data-seed="logId" onChange={e => this.onCheck(e, item)}>
                          <p className="flex-row-base">第{item.num}号投注站 {item.flag.card ? <span className="app-icon icon-zheng" /> : null}{item.flag.bao ? <span className="app-icon icon-bao" /> : null}</p>
                        </Checkbox.AgreeItem>
                        <p className="item-flag">
                          {item.flag.cpk ? <span className="flag-cpk">出票快</span> : null}
                          {item.flag.fwh ? <span className="flag-fwh">服务好</span> : null}
                          {item.flag.xyx ? <span className="flag-xyx">幸运星</span> : null}
                        </p>
                      </div>
                      <div className="item-right flex-row-base">
                        <span className="app-icon icon-point" />
                        <span>{item.distance}km</span>
                      </div>
                    </div>
                  )

                  return result
                })
              }
            </div>
          </div>
        </div>
        <div className="page-footer">
          <div className="jczq-footer">
            <Button type="red" disabled={false} onClick={this.onNext}>提交预约</Button>
          </div>
        </div>
        {
          showTip
            ? <ModalTip onOk={this.onTipOk} />
            : null
        }
      </div>
    )
  }
}
